為什麼要使用語意化的 HTML 標籤？有什麼好處？

• 對使用者：輔助功能（如：Text-To-Speech）
• 對企業：有助於 SEO
• 對開發者：語意化的程式碼更乾淨，更容易理解

常用的語意化標籤

關於排版的語意化標籤 (display: block)

關於行內文字的語意化標籤 (display: inline)

Use case

<article>
  <header>
    <h1>Why you should buy more cheeses than you currently do</h1>
  </header>
  <section>
    <header>
      <h2>Part 1: Variety is spicy</h2>
    </header>
  </section>
</article>

<address>
  <a href="mailto:">mail</a><br>
  <a href="tel:+">phone</a>
</address>

<picture>
  <img src="picture.png" alt="picture">
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
</picture>

One more thing

有趣的 No-Class CSS Frameworks
只要寫語意化的標籤就可以有基本的樣式。

參考資料

HTML elements reference
Writing Semantic HTML
Semantic HTML And Why Does it Matter
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
Why, How, and When to Use Semantic HTML and ARIA
Stop using so many divs! An intro to semantic HTML
HTML can do that?

心得感想

鐵人賽寫到這裡有點為寫而寫的感覺了，如果之後連續 2 天都這樣，就先中斷鐵人賽，照樣寫滿 30 篇。